<template>
  <div>
    <div style="color: #666; display: inline-block; ">说明: </div>
    <el-input v-model="exerciseGroup.totalTitleStem"></el-input>
    <div style="color: #666; display: inline-block; ">
      <span>{{ exerciseGroup.role === CONST.EXERCISE_GROUP_ROLE_A3 ? '公用题干' : '案例描述'}}: </span>
      <em style="color: red">*</em>
    </div>
    <KindEditor :content.sync="exerciseGroup.caseAlias"
                :uploadPath="'exercise/' + exerciseGroup.id"/>
    <el-tabs v-model="activeEntry" type="card"
             editable @tab-add="addExerciseEntry" @tab-remove="deleteExerciseEntry">
      <el-tab-pane v-for="(item, idx) in exerciseGroup.exerciseEntryList" :label="'试题' + (idx + 1)" :name="'' + idx">
        <EditExerciseEntry :exerciseEntry="item"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {mapState} from "vuex";
  import EditExerciseEntry from "./EditExerciseEntry";

  export default {
    name: "EditExerciseEntry3",
    components: {EditExerciseEntry},
    data() {
      return {
        activeEntry: '0',
      }
    },
    methods: {
      addExerciseEntry() {
        this.exerciseGroup.exerciseEntryList.push({
          id: UTIL.generateSfId(),
          role: this.exerciseGroup.role,
          choiceArray: [],
        })
      },
      deleteExerciseEntry(idx) {
        this.$confirm('确认删除本小题？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.exerciseGroup.exerciseEntryList.splice(idx, 1)
          if (this.activeEntry >= this.exerciseGroup.exerciseEntryList.length) {
            this.activePath = '0'
          }
        }, UTIL.emptyFun)
      },
    },
    computed: {
      ...mapState(['exerciseGroup'])
    },
    created() {
    }
  }
</script>

<style scoped>
  div {
    line-height: 30px;
  }
  /deep/ p {
    margin-top: 0px;
  }
</style>
